<template>
	<view class="maintenance">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="searchInput">
			<view class="search-top">
				<view class="icon">
					<uni-icons type="left" size="30" @click="HandleReturn" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title" @click="show=true">{{title}}</view>
				<view></view>
			</view>
			<button class="top-btn" @click="seeDirectory" v-if="isRoles">查看目录</button>
		</view>
		<up-loadmore status="loading" v-if="isLoading" />
		<scroll-view :scroll-y="true" class="updata-form" v-else-if="isRoles&&!NewForm">
			<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
				v-if="!form.wbPlanClassifyYearContentThreeVos || form.wbPlanClassifyYearContentThreeVos?.length == 0">
			</up-empty>
			<view class="control-room" v-for="item in form.wbPlanClassifyYearContentThreeVos"
				:key="item.classifyContentId">
				<text class="control-title">{{item.name}}</text>
				<text class="control-message">{{item.standardRequest??'暂无简介'}}</text>
				<view class="control-info">
					<view class="position">
						<view class="label">
							<text>检查部位</text>
							<text>具体位置精确到楼层</text>
						</view>
						<up-input v-model="item.classifyName" placeholder="请输入" clearable border='none'
							customStyle="background-color:#F6F8FA;height: 64rpx;"></up-input>
					</view>
					<view class="message">
						<view class="label">检查情况及处理说明</view>
						<up-textarea v-model="item.actualMeasurement" placeholder="请输入"
							customStyle="background-color:#F6F8FA;"></up-textarea>
					</view>
					<view class="result">
						<view class="label">
							结果判定
						</view>
						<!-- <up-input v-model="item.isOk" placeholder="请输入合格或不合格" clearable border='none'
							customStyle="background-color:#F6F8FA;">
						</up-input> -->
						<up-radio-group v-model="item.result" placement="row">
							<up-radio :customStyle="{marginBottom: '8px'}" label="无" :name="3"
								style="margin-right: 30rpx;">
							</up-radio>
							<up-radio :customStyle="{marginBottom: '8px'}" label="合格" :name="1"
								style="margin-right: 30rpx;">
							</up-radio>
							<up-radio :customStyle="{marginBottom: '8px'}" label="不合格" :name="2">
							</up-radio>
						</up-radio-group>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view :scroll-y="true" class="updata-formq" v-else-if='isRoles&&NewForm'>
			<uni-forms ref="from1" :modelValue="model1" :rules="rulesfrom" label-position="top" label-width="300rpx">
				<uni-forms-item label="建筑信息" class="form-item-vertical" name="inventory">
					<up-upload :fileList="entrySlip" :previewFullImage="true" @afterRead="entryAfterRead"
						@delete="entryDeletePic" name="1" multiple :maxCount="1" :deletable="isRoles"></up-upload>
				</uni-forms-item>
				<uni-forms-item label="建筑消防设施概况" class="form-item-vertical" name="collect" required>
					<up-textarea v-model="model1.collect" placeholder="请输入"
						customStyle="background-color:#fafcfe;"></up-textarea>
				</uni-forms-item>
				<uni-forms-item label="检测结论" class="form-item-vertical" name="scheme" required>
					<up-textarea v-model="model1.scheme" placeholder="请输入"
						customStyle="background-color:#fafcfe;"></up-textarea>
				</uni-forms-item>
				
				
				<uni-forms-item label="建筑消防设施" class="form-item-vertical" name="scheme" >
				<uni-data-checkbox multiple v-model="listOfFacilities" :localdata="range" @change="changeOfFacilities"></uni-data-checkbox>
				</uni-forms-item>
				
				
				<uni-forms-item label="备注" class="form-item-vertical" name="rests" >
					<up-textarea v-model="model1.rests" placeholder="请输入"
						customStyle="background-color:#fafcfe;"></up-textarea>
				</uni-forms-item>
				
			</uni-forms>
		</scroll-view>
		<!-- 预览图片 -->
		<scroll-view class="proview" :scroll-y="true" v-else>
			<up-loading-page :loading="loading" bg-color="#e8e8e8" loading-text="加载中..."></up-loading-page>
			<image :src="imgSrc" mode="widthFix" class="image"></image>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="fire-buttom">
			<view class="up-page" @click="upPage" v-show="isRoles">
				<!-- <up-icon size="40" name="@/static/image/上一页.png"></up-icon> -->
				<image src="@/static/image/uppage.png" mode=""></image>
				<text>上一页</text>
			</view>
			<view class="down-page" @click="downPage" v-show="isRoles">
				<!-- <up-icon size="40" name="@/static/image/下一页.png"></up-icon> -->
				<image src="@/static/image/downpage.png" mode=""></image>
				<text>下一页</text>
			</view>
			<button class="submit" @click="submit" v-if="isRoles">提交</button>
			<button class="submit" @click="check" v-else>审核</button>
			<button type="button" @click="previewHandler" v-if="isRoles">预览</button>
			<button class="load-receipt" @click="loadReceipt" v-if="isRoles">上传凭条</button>
			<button class="load-receipt" @click="loadReceipt" v-else>查看凭条</button>
		</view>
		<!-- 预览 -->
		<!-- <view class="float-preview">
			<button type="button" @click="previewHandler">预览</button>
		</view> -->
		<u-modal :show="show" :content='title' @confirm="confirm"></u-modal>
		<up-popup :show="isShow" :closeOnClickOverlay="false" :round="10" mode="bottom">
			<view class="popup">
				<view class="popup-top">
					<view class="top-left" @click="coles">
						取消
					</view>
					<view class="top-right" @click="popupSubmit">
						确认
					</view>
				</view>
				<view class="popup-body">
					<uni-forms ref="valiForm" :rules="rules" :modelValue="checkForm" :label-width="80"
						label-align="right">
						<uni-forms-item label="是否合格" name="test">
							<uni-data-checkbox v-model="checkForm.test" :localdata="tests" style="line-height: 100%;" />
						</uni-forms-item>
						<uni-forms-item label="描述" name="introduction">
							<uni-easyinput type="textarea" v-model="checkForm.auditRemark" placeholder="请输入审核结果描述" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		getCatalogueYearList,
		planAudit,
		checkReject,
		submitYearForm,
		updatePlanForm,
		wbPlanByIdGet
	} from "@/api/maintenance.js"
	import {
		previewYearly
	} from "@/api/proview.js"
	import toSafe from '@/compoents/top-safe.vue'
	import EventBus from '@/utils/eventBus.js'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import {
		getToken
	} from '@/utils/auth'
	import Config from '@/config.js'
	import {
		ref,
		reactive,
		onMounted,
		onUpdated,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const NewForm = ref(false)
	let form = reactive({})
	let dataLists = reactive([])
	const isLoading = ref(false)
	let itemId = ref()
	let isId = ref()
	let isRoles = ref(true)
	let isShow = ref(false)
	let testStatus = ref()
	let checkForm = reactive({
		test: 0,
		auditRemark: '',
	})
	let tests = reactive([{
		text: '合格',
		value: 0
	}, {
		text: '不合格',
		value: 1
	}])
	
	
	const listOfFacilities =ref([])
	const range=ref([	{"value": 'A消防供配电设施',"text": "A消防供配电设施"	},
	{"value": 'B火灾自动报警系统',"text": "B火灾自动报警系统"},
	{"value": 'C消防给水设施',"text": "C消防给水设施"},
	{"value": 'D消火栓和消防炮',"text": "D消火栓和消防炮"},
	{"value": 'E自动喷水灭火系统',"text": "E自动喷水灭火系统"},
	{"value": 'F泡沫灭火系统',"text": "F泡沫灭火系统"},
	{"value": 'G气体灭火系统',"text": "G气体灭火系统"},
	{"value": 'H机械加压送风系统',"text": "H机械加压送风系统"},
	{"value": 'I机械排烟系统',"text": "I机械排烟系统"},
	{"value": 'J应急照明和疏散指示标志',"text": "J应急照明和疏散指示标志"},
	{"value": 'K应急广播系统',"text": "K应急广播系统"},
	{"value": 'L消防专用电话',"text": "L消防专用电话"},
	{"value": 'M消防分隔设施',"text": "M消防分隔设施"},
	{"value": 'N消防电梯',"text": "N消防电梯"},
	{"value": '0灭火器',"text": "0灭火器"},])

	let rules = reactive({})
	const title = ref('')
	// 建筑信息列表
	const tableData = reactive([{
		text: "A", //显示
		value: "" // 值
	}])

	let pageData = reactive([])
	//预览图片
	const imgSrc = ref("")
	const loading = ref(false)
	const show = ref(false)
	const nameValue = ref('')
	const from1 = ref(null);
	let entrySlip = reactive([])
	const model1 = ref({
		rests: '',
		collect: '',
		inventory: '',
		listOfFacilities:[],
		scheme: ''
	})
	const rulesfrom = reactive({
		collect: {
			rules: [{
				type: 'string',
				required: true,
				errorMessage: '请输入问题汇总',
				trigger: ['change'],
			}]
		},
		scheme: {
			rules: [{
				type: 'string',
				required: true,
				errorMessage: '请输入建议方案',
				trigger: ['change'],
			}]
		}
	})
	const indexValue = ref('')

	onLoad(options => {
		itemId.value = options.itemId
		isId.value = options.id
		isRoles.value = options.type == '审核' ? false : true
		if (options.indexValue) {
			indexValue.value = options.indexValue
			NewForm.value = true
			title.value = '反馈'
			// downPage()
			getList()
		} else {
			testStatus.value = options.status
			title.value = options.name
			if (options.nameValue) {
				nameValue.value = options.nameValue
			}
			getYearImg()
			getList()
		}
		wbPlanByIdGetFun()
		// getRoles()
	})
	// onShow(() => {
	// 	getList()
	// 	getPage()
	// })
	const getRoles = () => {
		let roles = uni.getStorageSync('roles')
		roles.split(',').forEach(item => {
			if (item == '一级消防师' || item == '工程师') {
				isRoles.value = false
			} else {
				isRoles.value = true
			}
		})
	}
	const getList = () => {
		isLoading.value = true
		getCatalogueYearList(itemId.value).then(res => {
			if (res.code == 200) {
				const list = []
				pageData.splice(0, pageData.length, ...res.rows)
				if (!title.value) {
					title.value = res.rows[0].classifyName
				}
				
				
				// res.rows.forEach(item => {
				// 	item.contentList.forEach(i => {
				// 		i.classifyId = item.classifyId
				// 		i.result = 3
				// 	})
				// })
				res.rows.forEach(item => {
					item.wbPlanClassifyYearContentVos?.forEach(i => {
						i.wbPlanClassifyYearContentThreeVos?.forEach(el => {
							el.result = 3
							el.name = i.classifyName
						})
					})
					list.push(...item.wbPlanClassifyYearContentVos)
				})
				dataLists.splice(0, dataLists.length, ...list)
				getPage(isId.value)
			}
			isLoading.value = false
		}).catch(err => {
			isLoading.value = false
		})
	}
	const confirm = () => {
		show.value = false;
	}
	const getPage = (id = null) => {
		if (id) {
			dataLists?.forEach(item => {
				if (item.classifyYearContentId == id) {
					getForm(item)
				}
			})
		} else {
			getForm(dataLists[0])
		}
	}
	// 判断是否合格
	const getForm = item => {
		Object.assign(form, item)
	}
	// 上一页
	const upPage = () => {
		if (NewForm.value) {
			NewForm.value = false
			dataLists.forEach((item, index) => {
				if (form.classifyYearContentId !== item.classifyYearContentId) return
				if (index == 0) {
					uni.showToast({
						title: '已经是第一页了！',
						icon: 'none',
					})
				} else {
					title.value = pageData.find(i => dataLists[index].classifyYearId == i.id)
						.classifyName
					Object.assign(form, dataLists[index])
				}
			})
		} else {
			dataLists.forEach((item, index) => {
				if (form.classifyYearContentId !== item.classifyYearContentId) return
				if (index == 0) {
					uni.showToast({
						title: '已经是第一页了！',
						icon: 'none',
					})
				} else {
					title.value = pageData.find(i => dataLists[index - 1].classifyYearId == i.id)
						.classifyName
					Object.assign(form, dataLists[index - 1])
				}
			})
		}
		// EventBus.emit('updata-page', form.index - 1)
		// getForm()
	}

	// 下一页
	const downPage = () => {
		if (!NewForm.value) {
			const matchingItem = dataLists.find(item => item.classifyYearContentId === form.classifyYearContentId);
			if (matchingItem) {
				const nextIndex = dataLists.indexOf(matchingItem) + 1;
				if (nextIndex < dataLists.length) {
					title.value = pageData.find(item => item.id == dataLists[nextIndex].classifyYearId)
						.classifyName
					Object.assign(form, dataLists[nextIndex]);
				} else {
					title.value = '反馈'
					NewForm.value = true
				}
			}
		} else {
			uni.showToast({
				title: '已经是最后一页了！',
				icon: 'none',
			});
		}

		// EventBus.emit('updata-page', form.index + 1)
		// getForm()
	}

	const HandleReturn = () => {
		// uni.navigateBack({
		// 	delta: 1
		// });
		if (isRoles.value) {
			uni.redirectTo({
				url: '/pages/maintenance/tasks'
			})
		} else {
			uni.redirectTo({
				url: '/pages/maintenance/check'
			})
		}


	}

	//反馈回显
	const wbPlanByIdGetFun = () => {
		wbPlanByIdGet(itemId.value).then(res => {
			console.log(res, itemId.value, 'qqqqqq');
			if (res.data.inventory) {
				const isEntrySlip = res.data.inventory?.split(',')
				if (isEntrySlip.length) {
					isEntrySlip.forEach(item => {
						entrySlip.push({
							status: 'success',
							message: '',
							url: Config.baseUrl + item,
						});
					})
				} else {
					entrySlip = []
				}
			}
			
			console.log(res.data.listOfFacilities,'res.data.listOfFacilities');
			if (res.data.listOfFacilities) {
				// listOfFacilities.value
				let list = JSON.parse(res.data.listOfFacilities);
				listOfFacilities.value = []
			list.forEach((element) =>{
		
				if (element.value == 1) {
					listOfFacilities.value.push(element.text)
				}
			});
			
			console.log(listOfFacilities.value,'listOfFacilities.value');
			
			}
			model1.value = {
				rests: res.data.rests,
				collect: res.data.collect,
				inventory: res.data.inventory,
				scheme: res.data.scheme,
				listOfFacilities: res.data.listOfFacilities,
			}
		})
	}
	// 查看目录
	const seeDirectory = () => {
		uni.navigateTo({
			url: `/pages/catalogueYear/index?id=${itemId.value}&type=${isRoles.value?'':'审核'}&nameValue=${nameValue.value}`
		})
	}


const changeOfFacilities = (e)=>{
	 let list = e.detail.value
	let arr = []
	 range.value.forEach((element) =>{
		 arr.push({
			 text:element.text,
			 value:0
		 })
		
	});
	 model1.value.listOfFacilities = []
	 list.forEach((element) =>{
	 	arr.forEach((item) =>{
	 		if (element == item.text) {
	 			item.value = 1
	 		}
	 	});
	 });
	 if (arr.length>0) {
	 	model1.value.listOfFacilities =JSON.stringify(arr)
	 }
	 
	console.log(model1.value.listOfFacilities,'listOfFacilities');
}

	// 提交任务
	const submit = () => {
		// form.contentList?.forEach(item => {
		// 	item.planId = itemId.value
		// })
		if (NewForm.value) {
			// console.log(222222,model1);
			proxy.$refs.from1.validate().then(res => {
				if (entrySlip.length != 0) {
					let entrySlipList = []
					// console.log(entrySlip, sitePhoto);
					entrySlip.forEach(item => {
						entrySlipList.push(getImageValue(item.url))
					})
					model1.value.inventory = entrySlipList.join(',')
				}
				let entrySlipList = []
				// console.log(entrySlip, sitePhoto);
				entrySlip.forEach(item => {
					entrySlipList.push(getImageValue(item.url))
				})

				model1.value.inventory = entrySlipList.join(',')
				uni.showLoading({
					title: '任务提交中'
				})
				updatePlanForm({
					...model1.value,
					id: itemId.value
				}).then(res => {
					uni.showToast({
						title: "提交成功"
					})
				})
			})
			return
		}
		uni.showLoading({
			title: '任务提交中'
		})
		let data = []
		dataLists.forEach(item => {
			item.wbPlanClassifyYearContentThreeVos.forEach(i => {
				data.push(i)
			})
		})
		submitYearForm(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '任务提交成功！'
				})
			}
		})
	}
	// 上传凭条
	const loadReceipt = () => {
		if (isRoles.value) {
			if (!model1.value.collect || !model1.value.scheme) {
				uni.showToast({
					title: '请先填写提交反馈！',
					icon: 'none'
				})
			} else {
				if (entrySlip.length != 0) {
					let entrySlipList = []
					entrySlip.forEach(item => {
						entrySlipList.push(getImageValue(item.url))
					})
					model1.value.inventory = entrySlipList.join(',')
				}
				updatePlanForm({
					...model1.value,
					id: itemId.value
				}).then(res => {
					uni.navigateTo({
						url: `/pages/photo/updata?id=${itemId.value}&isRoles=${isRoles.value}&status=${testStatus.value}`
					})
				})
			}
			return
		}
		uni.navigateTo({
			url: `/pages/photo/updata?id=${itemId.value}&isRoles=${isRoles.value}&status=${testStatus.value}`
		})
	}

	// 审核
	const check = () => {
		isShow.value = true
	}
	const popupSubmit = () => {
		let form = {
			planId: itemId.value,
			status: testStatus.value
		}
		Object.assign(form, checkForm)
		if (checkForm.test == 0) {
			planAudit(form).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '审核成功',
						icon: 'none'
					});
					Object.assign(checkForm, {
						test: 0,
						auditRemark: '',
					})
				}
			})
			// uni.navigateTo({
			// 	url: '/pages/maintenance/check'
			// })
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else {
			checkReject(form).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '审核成功',
						icon: 'none'
					});
					Object.assign(checkForm, {
						test: 0,
						auditRemark: '',
					})
				}
			})
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}
	const coles = () => {
		isShow.value = false
		Object.assign(checkForm, {
			test: 0,
			auditRemark: '',
		})
	}

	// 预览
	const previewHandler = () => {
		uni.navigateTo({
			url: `/pages/proview/index?type=${'年检'}&id=${itemId.value}`
		})
	}
	const getImageValue = (url) => {
		if (url) {
			if (url.indexOf('prod-api') != -1) {
				console.log(url.split('prod-api'));
				return url.split('prod-api')[1]
			} else {
				return url
			}
		} else {
			return null
		}
	}
	// 获取年检任务
	const getYearImg = () => {
		loading.value = true
		previewYearly(itemId.value).then(res => {
			loading.value = false
			getData(res)
		})
	}
	const getData = res => {
		if (res.code == 200) {
			imgSrc.value = res.msg
		}
	}
	const entryAfterRead = async (event) => {
		const maxSize = 1 * 1024 * 1024; // 1MB
		const validFormats = ['png', 'jpg'];
		const files = event.file[0]
		if (files.size > maxSize) {
			uni.showToast({
				title: '文件太大，请选择小于1024kb的文件！',
				icon: 'none',
				duration: 4000
			})
			return
		}
		const urlformat = files.url.substring(files.url.length - 3)
		// console.log(files.url, urlformat, 'console.log(event);');
		if (!validFormats.includes(urlformat)) {
			uni.showToast({
				title: '文件格式不正确，请上传JPG或PNG格式的图片！',
				icon: 'none',
				duration: 4000
			})
			return
		}
		let lists = [].concat(event.file);
		let fileListLen = entrySlip.length;
		lists.map((item) => {
			entrySlip.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const res = await uploadFilePromise(lists[i].url);
			if (res.code == 200) {
				let item = entrySlip[fileListLen];
				entrySlip.splice(fileListLen, 1, {
					...item,
					status: 'success',
					message: '',
					url: res.fileName,
				});
				fileListLen++;
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				let index = entrySlip.findIndex(item => item.message == '上传中')
				if (index != -1) {
					entrySlip.splice(index, 1)
				}
			}
		}
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'https://xf.xiaoyiyunwang.com/prod-api/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				header: {
					'Authorization': 'Bearer ' + getToken()
				},
				success: (res) => {
					resolve(JSON.parse(res.data));
				},
			});
		});
	};
	// 删除图片
	const entryDeletePic = (event) => {
		entrySlip.splice(event.index, 1);
	};
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.maintenance {
		width: 100%;
		height: 100%;
		background: #F6F8FA;
		overflow: hidden;

		.searchInput {
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			background-color: #fff;

			// position: fixed;
			// top: 0;
			// left: 0;
			padding: 0 20rpx;
			z-index: 99;

			.search-top {

				.inline_center();
				height: 88rpx;
				width: 90vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon {
					width: 10vw;
					height: 88rpx;
					line-height: 88rpx;
					z-index: 1;
				}

				.title {
					width: 50vw;
					line-height: 88rpx;
					height: 88rpx;
					text-align: center;
					margin-left: -8vw;
					font-size: 34rpx;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}

			.top-btn {
				position: absolute;
				right: 28rpx;
				// width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: #325EF5;
				color: #fff;
				font-size: 28rpx
			}

			.search_icons {
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}

		}

		.updata-form {
			padding: 0 28rpx;
			height: calc(100vh - 200rpx);

			.control-room {
				display: flex;
				flex-direction: column;
				padding-bottom: 50rpx;

				.control-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.control-message {
					padding: 10rpx 0;
					font-size: 24rpx;
					opacity: 0.6;
				}

				.control-info {
					padding: 20rpx;
					background-color: #fff;
					border-radius: 12rpx;

					.position {
						.label {
							margin-bottom: 10rpx;

							text:nth-child(2) {
								font-size: 24rpx;
								opacity: 0.6;
								margin-left: 20rpx;
							}
						}
					}

					.message {
						margin-top: 20rpx;

						.label {
							font-size: 28rpx;
							margin-bottom: 10rpx;
						}
					}

					.result {
						margin-top: 20rpx;

						.label {
							font-size: 28rpx;
							margin-bottom: 10rpx;
						}

						.result-check {
							display: flex;

							>view {
								flex: 1;
							}
						}
					}
				}

				&:nth-child(1) {
					margin-top: 20rpx;
				}

				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 20rpx;
				}
			}
		}

		.updata-formq {
			padding: 0 28rpx;
			height: calc(100vh - 300rpx);
		}

		.proview {
			width: 100%;
			height: calc(100vh - 200rpx);

			// overflow: hidden;
			.image {
				width: 100%;
				height: 100%;
			}
		}

		.fire-buttom {
			width: 100%;
			height: 112rpx;
			position: absolute;
			bottom: 0;
			padding: 9rpx 28rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.up-page {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;

				>image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.down-page {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 24rpx;

				>image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			>button {
				width: 175rpx;
				height: 58rpx;
				background-color: #325EF5;
				color: #fff;
				border-radius: 16rpx;
				margin: 0;
				line-height: 58rpx;
				font-size: 26rpx;
			}
		}


		.search-placeholder {
			width: 100%;
			height: 60rpx;
			background-color: #cfd9f9;
			font-size: 28rpx;
			color: #325EF5;
			text-align: center;
			line-height: 60rpx;
		}


		.uni-list {
			height: 80rpx;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.popup {
		height: 50vh;
		display: flex;
		flex-direction: column;

		.popup-top {
			padding: 10rpx 28rpx;
			font-size: 30rpx;
			background-color: #F2F2F2;
			color: #325EF5;
			.inline_space_between()
		}

		.popup-body {
			flex: 1;
			padding: 0 28rpx;
			// background-color: #dadada;
		}
	}

	.float-preview {
		position: fixed;
		right: 20rpx;
		bottom: 150rpx;

		button {
			border-radius: 10%;
			background-color: #325EF5;
			color: #fff;
		}
	}
</style>